<template>
  <div class="container">
    <div v-if="orders.length > 0">
      <!-- @click="$pt.navigateTo({url:'/pages/home/customer-manage/detail/main?id=' + resData.customerMemberId  + '&name=' + resData.customerNickname})" -->
      <div class="row-bar mar-t-10 flex flex-between">
          <div class="headshop-box">
              <img class="width-50 height-50" v-if="customerInfo.customerAvatar" :src="customerInfo.customerAvatar" alt="">
          </div>
          <div class="width-280 flex flex-between">
              <div>
                  <div class="font-13 font-color-9">昵称：<span class="font-color">{{customerInfo.customerNickname}}</span></div>
                  <div class="font-13 font-color-9">手机：<span class="font-color">{{customerInfo.customerPhone}}</span></div>
              </div>
              <!-- <div>
                  <img class="width-5 height-10" v-if="fileSpace" :src="fileSpace + '/images/arrow-right.png'" alt="">
              </div> -->
          </div>
      </div>
      <div v-for="(item, index) in orders" :key="index" @click="$pt.navigateTo({ url: `/pages/home/store-cancellation/order-cancellation/main?orderId=${item.orderId}` })">
        <div class="order-content mar-t-10">
          <div class="shop-title-bar flex flex-between bc-color-w pad-l-15 pad-r-15">
            <div>
              <div class="flex flex-between font-12 font-color-8">
                <span>订单编号：<span class="font-color">{{item.orderNo}}</span></span>
                <span class="copy-btn mar-l-15" @click.stop="$pt.setClipboardData({data: item.orderNo})">复制</span>
              </div>
              <div><span class="font-12 font-color-8">订单类型：<span class="font-color">{{orderTypeDict[item.deliveryType]}}</span></span></div>
            </div>
            <!-- <icon class="iconfont icon-arrow-right font-15 font-color-6"></icon> -->
          </div>
          <div class="order-row flex flex-between"  v-for="(good,ind) in item.orderGoodsList" :key="ind">
            <div class="img-box">
                <img v-if="good.goodsImageUrl" :src="good.goodsImageUrl" alt="" class="width-90 height-90">
            </div>
            <div class="width-240 shop-content height-90">
              <div class="line-2 font-14 font-color">
                {{good.goodsTitle}}
              </div>
              <div class="line-1 font-color-9 select-content font-12" v-if="good.skuDetail">{{good.skuDetail}}</div>
              <div class="height-20" v-else></div>
              <div class="flex flex-between font-color">
                <span class="font-14">￥{{good.goodsPrice}}</span>
                <span class="font-11">×{{good.goodsNum}}件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="total-content">
          <div class="total-title font-15 flex flex-between">
            <div class="font-color">订单状态</div>
            <div class="font-color-9">待提货</div>
          </div>
          <div class="total-row font-15 flex flex-between">
            <div class="font-color">买家昵称</div>
            <div class="font-red">{{item.customerNickname}}</div>
          </div>
        </div>
        <div class="bc-color-w font-15 pad-l-15 pad-r-15 pad-t-3 pad-b-3">
          <span>共<span class="font-red">{{item.goodsNum}}</span>件商品</span>
          <span class="mar-l-15">实付:<span class="font-red">￥{{item.actualPrice}}</span></span>
        </div>
        <!-- <div class="btn-box">
          <button class="confirm-btn" @click.stop="confirm_btn(item.orderId)">确定核销</button>
        </div> -->
      </div>
    </div>
    <div class="width-375 nodata-box" v-if="isNodata">
      <img class="width-375 height-200" v-if="fileSpace" :src="fileSpace + '/images/not-data.png'" alt="">
      <div class="font-16 font-w font-color nodata">暂无数据</div> 
    </div>
    <van-dialog
      message="是否确认核销该订单"
      :show="showDialog"
      show-cancel-button
      @close="onClose"
      @confirm='confirm_canlletation'
    >
    </van-dialog>
  </div>
</template>
<script>
import { doOrderAcquisition, pageProjectOrderPickUp } from '@/api/personal'
import { listDeliveryType } from '@/api/order'
export default {
  data() {
    return {
      orders: [],
      customerInfo: {},
      params: {
        memberId: '',
        customerMemberId: '',
        size: 5,
        currentPage: 1
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      isNodata: false,
      showDialog: false,
      orderTypeDict: {}
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.params.memberId = this.getCustomerId
    this.params.currentPage = 1
    this.orders = []
    this.params.customerMemberId = this.getCurrentPage().query.memberId
    this.listDeliveryType()
    this.pageProjectOrderPickUp()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageProjectOrderPickUp()
    }
  },
  methods: {
    pageProjectOrderPickUp() {
      this.isNodata = false
      pageProjectOrderPickUp(this.params).then(response => {
        if (response.isError) return
        response.data.records.forEach(item => {
          this.orders.push(item)
        })
        this.customerInfo = this.orders[0]
        if (this.orders.length === 0) {
          this.isNodata = true
        }
        console.log(this.isNodata)
        this.params.currentPage++
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      })
    },
    onClose() {
      //  关闭确认框
      this.showDialog = false
    },
    confirm_btn(orderId) {
      this.orderId = orderId
      this.showDialog = true
    },
    confirm_canlletation() {
      const params = {
        orderId: this.orderId,
        memberId: this.getCustomerId
      }
      doOrderAcquisition(params).then((response) => {
        if (response.isError) return
        this.$pt.navigateTo({url: '/pages/home/store-cancellation/success-cancellation/main?orderId=' + this.orderId})
      }).catch(() => {
      })
    },
    listDeliveryType() {
      // 根据店主类型获取订单配送方式
      listDeliveryType(this.getCustomerId).then(response => {
        if (response.isError) return
        this.orderTypeDict = response.data
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.bc-color-w{
  background: white;
}
.row-bar{
    background: white;
    padding: 15px;
    .headshop-box{
        img{
            border-radius: 50%;
        }
    }
}
.order-content{
    .shop-title-bar{
      height: 50px;
      line-height: 1.2;
      .copy-btn{
        border-radius: 3px;
        border: 1px solid #dadada;
        padding: 2px 4px;
        font-size: 10px;
        color: #aeaeae;
      }
    }
    .order-row{
        border-bottom: 1px solid #ededed;
        padding: 10px 15px;
        &:last-child{
          border-bottom: unset;
        }
        .img-box{
            // background: yellow;
        }
        .shop-content{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .select-content{
            background: #e7e7e7;
            padding-left: 5px;
            margin: 5px 0;
        }
    }
    .line-1, .line-2 {
        line-height: unset;
        height: unset;
    }
    
}
.total-content{
    background: white;
    padding: 7px 15px;
    .total-title{
        padding: 3px 0;
    }
    .total-row{
        padding: 3px 0;
        border-bottom: 1px solid #ededed;
    }
}
.order-details{
    background: white;
    padding: 10px 15px 70px;
}
.btn-box{
    padding: 10px 15px;
    background: white;
    border-top: 1px solid #e1e1e1;
    .confirm-btn{
        color: white;
        background: #ff0000;
        font-size: 15px;
        border-radius: 3px;
        &::after{
            border: unset;
        }
    }
}
.nodata-box{
    margin-top: 88px;
    .nodata{
        margin-top: -32px;
        text-align: center;
    }
}
</style>
